<template>
  <view class="feedback" v-if="showFeedBackCommit">
    <view class="form-group">
      <view class="label">反馈内容</view>
      <textarea v-model="feedback" placeholder="请输入反馈内容"></textarea>
    </view>
    <view class="form-group">
      <button type="feedBackList" @click="showFeedBackList">查看已提交反馈信息</button>
      <button type="primary" @click="submitFeedback">提交反馈</button>
    </view>
    <view v-if="feedbackSent" class="success-message">
      <p>感谢您的反馈！</p>
    </view>
    <view v-if="feedbackError" class="error-message">
      <p>提交反馈时出错，请稍后重试。</p>
    </view>
  </view>
  <view v-else>
    <view class="feedback">
      <view class="form-group">
        <button type="feedBackList2" @click="goBack">显示提交反馈界面</button>
      </view>
    </view>
    <view v-for="(item, idx) in feedBackList" :key="idx">
      <view class="listFeedBack" :style="{'color':callColor(item.status)}">
        <view class="line">
          <text>状态：{{item.status == 0 ? '未处理' : '已处理'}}</text>
        </view>
        <view class="text-clamp2 line">
          <text>反馈内容：{{item.comment}}</text>
        </view>
        <view class=" line">
          <text>提交时间：{{item.createTime}}</text>
        </view>
        <view v-if="item.status == 1">
          <view class="text-clamp2 line" style="border-top: 1px solid #FFDD55;">
            <text>回复内容：{{item.processComment}}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        name: '',
        email: '',
        feedback: '',
        feedbackSent: false,
        feedbackError: false,
        uid: '',
        showFeedBackCommit: true,
        feedBackList: [],
      }
    },
    onLoad(options) {
      this.uid = options.uid;;
      // console.log(this.uid)
    },
    methods: {
      callColor(item) {
        if (item == 0) {
          return '#C0C0C0'
        } else {
          return 'black'
        }
      },
      goBack() {
        this.showFeedBackCommit = true;
      },
      //获取反馈列表
      async showFeedBackList() {
        this.showFeedBackCommit = false;
        const {
          data: result
        } = await uni.$http.post('/api/READ/api/my/feedback/list/' + this.uid);
        console.log(result)
        if (result.code != '200') return uni.$showMsg(result.msg);
        this.feedBackList = result.data;
      },
      async submitFeedback() {
        if (this.feedback.length <= 5) {
          return uni.$showMsg("反馈字数得大于5")
        }

        let condition = {
          uid: this.uid,
          comment: this.feedback
        }
        // 发送反馈数据到后台
        const {
          data: result
        } = await uni.$http.post('/api/READ/api/my/feedback/put', condition);
        if (result.code != '200') return uni.$showMsg(result.msg);
        uni.$showMsg("提交成功");
      }
    }
  }
</script>

<style lang="scss">
  .line{
    margin-bottom: 2%;
  }
  .text-clamp2 {
    width: 90%;
    display: inline-block;
    white-space: pre-wrap;
    word-wrap: break-word;
    height: auto;
  }

  .listFeedBack {
    margin: 4%;
    padding: 2%;
    border: 1px solid #FFDD55;
  }

  .feedback {
    width: 80%;
    margin: 5%;
  }

  .form-group {
    margin-bottom: 20px;
  }

  .label {
    display: block;
    margin-bottom: 5px;
  }

  input[type="text"],
  input[type="email"],
  textarea {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }

  button[type="primary"] {
    background-color: #00AA00;
    float: left;

    color: #fff;
    width: 200rpx;
    // padding: 10px 20px;
    font-size: 30rpx;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }

  button[type="feedBackList"] {
    background-color: #00AA00;
    float: left;
    margin-right: 10%;
    color: #fff;
    width: 330rpx;
    // padding: 10px 20px;
    font-size: 30rpx;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }

  button[type="feedBackList2"] {
    background-color: #00AA00;
    color: #fff;
    width: 330rpx;
    // padding: 10px 20px;
    font-size: 30rpx;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }

  .success-message,
  .error-message {
    margin-top: 20px;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
  }

  .success-message {
    background-color: #d4edda;
    color: #155724;
  }

  .error-message {
    background-color: #f8d7da;
    color: #721c24;
  }
</style>
